<template>
  <!-- 骨架屏 -->
  <SkeletonLoading v-if="initLoading" />
  <div class="income-module" v-else>
    <div class="income-wrapper flex-col">
      <div class="income flex-row">
        <div class="name flex-row">
          <span style="margin-right: 10px">总收入</span>
          <div class="money-wrapper flex-row">
            <text class="count">{{ formatNumber(summaryData.totalAmount, true) }}</text>
            <text class="count" style="margin: 0 8px">元</text>
          </div>
          <a-tooltip :placement="'bottom-right'">
            <template #content>
              <div>1、总收入为短租订单、违章代办费、借调（借出）、车辆处置费之和 </div>
              <div>2、取符合筛选条件的短租订单下包含的所有费项 </div>
            </template>
            <icon-question-circle class="svgtooltip fff" size="16" />
          </a-tooltip>
        </div>
        <div class="bottom flex-row">
          <div class="flex-row">
            <!-- <CardRate :rate="{ tb: summaryData.lastYearRate, hb: summaryData.lastCycleRate }" /> -->
          </div>
        </div>
      </div>
      <div class="icome-wrapper-card">
        <card
          v-for="(item, index) in summaryData?.revenueList"
          :key="index"
          class="order-card"
          :title="item.name"
          :icon="'income-money'"
          :tooltip="getTagQuestion(item.type).content"
          @click="onSummaryCardClick(item)"
          :class="{ hand: summaryCardCanClick(item) }"
          :hover="summaryCardCanClick(item)"
          :rate="{}"
          hideRate
          bigSize
        >
          <!-- :rate="{ tb: item.lastYearRate, hb: item.lastCycleRate }" -->
          <CardTotal :value="item.totalAmount" style="padding-bottom: 16px; border-bottom: 1px solid #e7e7e7" />
          <div style="margin-top: 16px">
            <CardCell size="large" label="已结算" :value="item.totalSettlementAmount" blackValue v-if="item.type != 5" />
            <CardCell size="large" label="待结算" :value="item.totalWaitSettlementAmount" blackValue v-if="item.type != 5" />
          </div>
        </card>
      </div>
    </div>
    <CardDivider />
    <div class="order-wrapper">
      <TopTitle>订单数统计</TopTitle>
      <div class="card-list-wrapper">
        <card
          v-for="(item, index) in orderStatisticsData?.orderCountList"
          :key="index"
          class="order-card"
          :title="item.name"
          :icon="getTagOrderCount(item.type).icon"
          :tooltip="getTagOrderCount(item.type).tooltip"
        >
          <!-- :rate="{ tb: item.lastYearRate, hb: item.lastCycleRate }" -->
          <CardTotal :value="item.count" unit="单" />
        </card>
      </div>
    </div>
    <CardDivider style="margin-top: 30px" />
    <!-- 锚点 -->
    <div ref="feeStatisticsRef"></div>
    <div class="order-wrapper">
      <TopTitle>订单收入明细</TopTitle>
      <a-alert style="margin-bottom: 16px; display: flex; align-items: flex-start">
        1、统计符合筛选条件下订单包含的全部费用
        <br />2、订单收入=订单租金+其他费用，同时还根据费用类型统计了订单收入中线上及线下费用的总额<br />
        3、将订单收入中的重点费项单独统计，包含保险费、车损费、油电费及续租费
      </a-alert>
      <div class="card-list-wrapper">
        <card
          :hover="item.totalAmount && Number(item.totalAmount) != 0"
          v-for="item in orderStatisticsData?.orderFeeItemList"
          :key="item.type"
          class="order-card"
          :class="getTagOrderFee(item.type).background"
          :title="item.name"
          :icon="getTagOrderFee(item.type).icon"
          :tooltip="
            item.name == '油电费总计' || item.name == '车损总计'
              ? getTagOrderFee(item.type).tooltip +
                (item.extendParams.length ? '，手动配置的费项包含：' + item.extendParams.toString() : '')
              : getTagOrderFee(item.type).tooltip
          "
          @click="onPageJumpClick('orderFee', item)"
          bigSize
        >
          <!-- :rate="{ tb: item.lastYearRate, hb: item.lastCycleRate }" -->
          <CardTotal :value="item.totalAmount" unit="元" />
          <div v-if="item.childrenList?.length">
            <CardCell
              :label="project.name"
              :value="project.totalAmount"
              :tooltip="
                project.name == '不计免赔'
                  ? '不计免赔+保险升级+手动配置的费项之和' +
                    (project.extendParams.length ? '，手动配置的费项包含：' + project.extendParams.toString() : '')
                  : ''
              "
              v-for="(project, i) in item.childrenList"
              :key="i"
            >
              <span
                class="btns"
                @click.stop="openModal('1')"
                v-if="i == 1 && item.type == 1"
                v-permission="'svms:index:revenue:summary.insurance'"
                >保险费配置<icon-right
              /></span>
              <span
                class="btns"
                @click.stop="openModal('2')"
                v-if="i == 1 && item.type == 2"
                v-permission="'svms:index:revenue:summary.car'"
                >车损费配置<icon-right
              /></span>
              <span
                class="btns"
                @click.stop="openModal('3')"
                v-if="i == 1 && item.type == 3"
                v-permission="'svms:index:revenue:summary.oil'"
                >油电费配置<icon-right
              /></span>
            </CardCell>
          </div>
          <div v-else>
            <span
              class="btns"
              @click.stop="openModal('1')"
              style="margin-left: 0"
              v-if="item.type == 1"
              v-permission="'svms:index:revenue:summary.insurance'"
              >保险费配置<icon-right
            /></span>
            <span
              class="btns"
              @click.stop="openModal('2')"
              style="margin-left: 0"
              v-if="item.type == 2"
              v-permission="'svms:index:revenue:summary.car'"
              >车损费配置<icon-right
            /></span>
            <span
              class="btns"
              @click.stop="openModal('3')"
              style="margin-left: 0"
              v-if="item.type == 3"
              v-permission="'svms:index:revenue:summary.oil'"
              >油电费配置<icon-right
            /></span>
          </div>
        </card>
      </div>
    </div>
    <CardDivider style="margin-top: 30px" />
    <div class="order-wrapper">
      <TopTitle>订单渠道数据统计</TopTitle>
      <div class="card-list-wrapper" v-if="orderStatisticsData?.channelOrderList.length">
        <card
          :hover="canOrderChannelItemClick(item)"
          type="meta-card"
          v-for="(item, index) in orderStatisticsData?.channelOrderList"
          :key="item.type"
          :title="item.name"
          :icon="getTagOrderChannel(item.type).icon"
          @click="onPageJumpClick('orderChannel', item)"
        >
          <CardCell label="收入" :value="item.totalAmount" />
          <CardCell label="抽佣" :value="item.commissionAmount" />
          <CardCell
            label="净收入"
            :value="item.totalProfitAmount"
            :tooltip="index == 0 ? ['1、净收入=订单总额-抽佣总额', '2、此处取符合筛选条件订单下包含的所有费用总额-抽佣总额'] : ''"
          />
          <CardCell
            label="有效订单数"
            :value="item.count"
            unit="单"
            :tooltip="index == 0 ? ['1、门店为取车门店的订单总数', '2、订单状态取：待排车、待用车、用车中、已还车、已完成'] : ''"
          />
        </card>
      </div>
      <CardEmpty v-else :description="'根据您的筛选统计数据时发现渠道无数据，请重新筛选'" />
    </div>
    <CardDivider style="margin-top: 30px" />
    <div class="order-wrapper">
      <TopTitle>订单-取车门店数据统计</TopTitle>
      <div class="card-list-wrapper" v-if="orderStatisticsData?.siteList.length">
        <card
          :hover="canOrderGiveCarItemClick(item)"
          type="meta-card"
          v-for="(item, index) in orderStatisticsData?.siteList"
          :key="index"
          class="order-card"
          :title="item.name"
          icon="asset-store"
          @click="onPageJumpClick('orderGiveCar', item)"
        >
          <!-- 问号内容仅展示第一个门店，后续无需重复展示 -->
          <CardCell
            label="净收入"
            :value="item.totalProfitAmount"
            :tooltip="index == 0 ? ['1、净收入=订单总额-抽佣总额', '2、此处取符合筛选条件订单下包含的所有费用总额-抽佣总额'] : ''"
          />
          <CardCell
            label="有效订单数"
            :value="item.count"
            unit="单"
            :tooltip="index == 0 ? ['1、门店为取车门店的订单总数', '2、订单状态取：待排车、待用车、用车中、已还车、已完成'] : ''"
          />
        </card>
      </div>
      <CardEmpty v-else :description="'根据您的筛选统计数据时发现门店暂无数据，请重新筛选'" />
    </div>
    <CardDivider style="margin-top: 30px" />
    <div class="order-wrapper">
      <TopTitle tooltip="财务统计=收款+付款，付款以正数同收款相加">订单财务统计</TopTitle>
      <div class="card-list-wrapper">
        <card
          :hover="item.totalAmount && Number(item.totalAmount) != 0"
          type="meta-card"
          v-for="(item, index) in orderStatisticsData?.billList"
          :key="index"
          class="order-card channel-card"
          :title="item.name"
          :icon="getTagOrderBill(item.type).icon"
          @click="onPageJumpClick('orderBill', item)"
        >
          <CardTotal :value="item.totalAmount" />
        </card>
      </div>
    </div>
    <CardDivider style="margin-top: 30px" />
    <div class="order-wrapper">
      <div class="flex-row" style="align-items: baseline; justify-content: space-between">
        <TopTitle>订单维度下费用及订单数统计</TopTitle>
        <div class="flex-row">
          <a-button class="income-statistical-button" type="outline" @click="openModalExplain"> 统计说明 </a-button>
          <a-select
            style="width: 180px; margin-left: 24px"
            placeholder="全部渠道"
            :options="revenueSummary.channelTypeEnums"
            multiple
            :max-tag-count="1"
            v-model="channelType"
            @change="getShortOrderProfitStatistics"
          />
        </div>
      </div>
      <a-alert style="margin-top: 6px"> 根据订单的取值时间（取车或还车），统计订单下包含的所有费用以及结算情况 </a-alert>
      <OrderCharts.BarLineChart v-if="dayNum > 2" :echartData="shortOrderProfitStatisticsData" style="margin-top: 20px" />
      <div class="flex-row" v-else style="justify-content: center">
        <div :style="{ width: dayNum == 1 ? '100%' : '50%' }" v-if="dayNum <= 2">
          <OrderCharts.PieChart v-if="profitChartsReady" :echartData="shortOrderProfitStatisticsData[0]" />
        </div>
        <div style="width: 50%" v-if="dayNum > 1 && dayNum <= 2">
          <OrderCharts.PieChart v-if="profitChartsReady" :echartData="shortOrderProfitStatisticsData[1]" />
        </div>
      </div>
    </div>
    <CardDivider style="margin-top: 30px" />

    <TopTitle>
      费用生成时间或结算时间统计订单费用
      <template #extra>
        <div>
          <a-button class="income-statistical-button" type="outline" @click="openModalExplainFee"> 统计说明 </a-button>
          <a-select
            style="width: 180px; margin-left: 24px"
            placeholder="全部渠道"
            :options="revenueSummary.channelTypeEnums"
            multiple
            :max-tag-count="1"
            v-model="channelTypeFee"
            @change="getShortOrderFeeProfitStatistics"
          />
          <a-select
            style="width: 180px; margin-left: 24px"
            :options="revenueSummary.orderFeeQueryTypeEnums"
            v-model="orderFeeQueryType"
            @change="getShortOrderFeeProfitStatistics"
          />
        </div>
      </template>
    </TopTitle>

    <div class="order-wrapper">
      <!-- <div class="flex-row" style="align-items: center; justify-content: space-between">
        <TopTitle>费用生成时间或结算时间统计订单费用</TopTitle>
        <div class="flex-row">
          <a-button class="income-statistical-button" type="outline" @click="openModalExplainFee"> 统计说明 </a-button>
          <a-select
            style="width: 180px; margin-left: 24px"
            placeholder="全部渠道"
            :options="sysDict.short_order_channel_type"
            multiple
            :max-tag-count="1"
            v-model="channelTypeFee"
            @change="getShortOrderFeeProfitStatistics"
          />
          <a-select
            style="width: 180px; margin-left: 24px"
            :options="revenueSummary.orderFeeQueryTypeEnums"
            v-model="orderFeeQueryType"
            @change="getShortOrderFeeProfitStatistics"
          />
        </div>
      </div> -->
      <div class="flex-row" style="justify-content: center">
        <div :style="{ width: dayNum == 1 ? '100%' : '50%' }" v-if="dayNum <= 2">
          <OrderCharts.PieChart v-if="feeChartsReady" :echartData="shortOrderFeeProfitStatisticsData[0]" :timeData="orderFeeQueryType" />
        </div>
        <div style="width: 50%" v-if="dayNum > 1 && dayNum <= 2">
          <OrderCharts.PieChart v-if="feeChartsReady" :echartData="shortOrderFeeProfitStatisticsData[1]" :timeData="orderFeeQueryType" />
        </div>
      </div>
      <CostCharts.BarLineChart
        :echartData="shortOrderFeeProfitStatisticsData"
        :timeData="orderFeeQueryType"
        style="margin-top: 20px"
        v-if="dayNum > 2"
      />
    </div>
    <configModal ref="configModalRef" @ok="okFn" />
  </div>
</template>

<script setup>
  import { useSysDict, usePageDict } from '@/hooks/useDict'
  import { Modal } from '@arco-design/web-vue'
  import {
    revenueStatistics,
    shortOrderProfitStatistics,
    orderStatistics,
    shortOrderFeeProfitStatistics,
  } from '@/api/dashboard/revenueSummary'
  import { ref, h, nextTick } from 'vue'
  import { formatNumber } from '@/utils'
  import configModal from '../components/config-modal.vue'
  import card from '../components/card/index.vue'
  import CardTotal from '../components/card/card-total.vue'
  import CardCell from '../components/card/card-cell.vue'
  import CardRate from '../components/card/card-rate.vue'
  import CardDivider from '../components/card/card-divider.vue'
  import TopTitle from '../components/card/top-title.vue'
  import CardEmpty from '../components/card/card-empty.vue'
  import SkeletonLoading from '../components/skeleton-loading.vue'
  import OrderCharts from '../components/echarts/order'
  import CostCharts from '../components/echarts/cost'
  import dayjs from 'dayjs'
  const emits = defineEmits(['loadDataComplete'])

  const configModalRef = ref(null)
  // const sysDict = useSysDict(['short_order_channel_type'])
  const revenueSummary = usePageDict('revenueSummary')
  const summaryData = ref([])
  const orderFeeQueryType = ref(11)
  // 获取筛选数据
  const basicQueryParam = ref({})
  const dayNum = ref(0)

  const props = defineProps({
    // 跳转函数
    nav2WithCode: Function,
    // 更新数据更新时间
    refreshUpdateTime: {
      type: Function,
      required: true,
    },
  })

  // 根据type返回不同的值
  // 0:总收入 1:短租 2:长租 3: 违章 4:车辆借出 5:车辆处置
  const getTagQuestion = (type) => {
    const tagItem = {
      1: {
        content: [
          '1、订单收入：订单费项总额之和，不包含违章费及押金',
          '2、订单状态取：待排车、待用车、用车中、已还车、已完成，已取消',
          '3、结算状态取：待结算、部分结算、结算中、已结算',
        ],
      },
      3: {
        content: ['1、违章代办收入=代办费用-违章代办真实成本', '2、费用状态取：未收付款、已收付款、已驳回'],
      },
      4: {
        content: ['1、车辆借出收入=借出费用+借调附加费', '2、费用状态取：未收付款、已收付款、已驳回'],
      },
      5: { content: ['车辆处置费为操作处置时填写的出售金额或补贴金额'] },
    }
    return tagItem[type] || { content: [] }
  }

  // type: 0, name: "有效订单数",type: 2, name: "渠道有效订单数",type: 1, name: "线下有效订单数",
  const getTagOrderCount = (type) => {
    const tagItem = {
      0: {
        tooltip: ['订单状态取：待排车、待用车、用车中、已还车、已完成，已取消的订单不计算在内'],
        icon: 'income-order',
      },
      1: {
        tooltip: '',
        icon: 'income-line',
      },
      2: {
        tooltip: '',
        icon: 'income-channel',
      },
    }
    return tagItem[type] || { tooltip: '', icon: '' }
  }

  // type: 5, name: "订单租金",type: 6, name: "其他费用", type: 7, name: "线上费用",
  // type: 4, name: "线下费用",type: 1, name: "保险费用总计",type: 2, name: "车损总计",
  // type: 3, name: "油电费总计",type: 8, name: "续租费总计",
  const getTagOrderFee = (type) => {
    const tagItem = {
      5: {
        icon: 'income-money-v1',
        tooltip: [
          '1、订单租金：符合筛选条件订单下的车辆租金、手续费、保险费之和，也包含续租产生的车辆租金、手续费、保险费',
          '2、保险费包含基础保险和不计免赔，不计免赔的具体费项支持配置',
          '3、订单状态取：待排车、待用车、用车中、已还车、已完成、已取消',
          '4、结算状态取：待结算、部分结算、结算中、已结算',
        ],
        background: 'purple',
      },
      6: {
        icon: 'income-money-v1',
        tooltip: [
          '1、其他费用：除车辆租金、手续费、保险费之外所有的费项都为其他费用',
          '2、订单状态取：待排车、待用车、用车中、已还车、已完成，已取消',
          '3、结算状态取：待结算、部分结算、结算中、已结算',
          '4、其他费用=收款费项-付款费项',
        ],
        background: 'purple',
      },
      7: {
        icon: 'expend-purchase',
        tooltip: '',
        background: 'orange',
      },
      4: {
        icon: 'expend-purchase',
        tooltip: '',
        background: 'orange',
      },
      1: {
        icon: 'income-insurance-v1',
        tooltip: '',
        background: 'green',
      },
      2: {
        icon: 'income-car-v1',
        tooltip: '车损费=车损费用+配置的相关费用之和',
        background: 'green',
      },
      3: {
        icon: 'income-oil-v1',
        tooltip: '油电费=油电费用+配置的相关费用之和',
        background: 'green',
      },
      8: {
        icon: 'income-zu-v1',
        tooltip: '',
        background: 'green',
      },
    }
    return tagItem[type] || { content: [] }
  }
  // 2:悟空,3:哈啰,1:携程,-1:飞猪,-2:滴滴,-3:铁行,-4:飞租 0：自营
  const getTagOrderChannel = (type) => {
    const tagItem = {
      0: {
        icon: 'card_icon_zy',
      },
      1: {
        icon: 'card_icon_xc',
      },
      3: {
        icon: 'card_icon_hl',
      },
      2: {
        icon: 'card_icon_wk',
      },
      '-4': {
        icon: 'card_icon_fzs',
      },
      '-3': {
        icon: 'card_icon_tx',
      },
      '-2': {
        icon: 'card_icon_dd',
      },
      '-1': {
        icon: 'card_icon_fz',
      },
      999: {
        icon: 'card_icon_sd',
      },
    }
    return tagItem[type] || { icon: 'card_icon_sd' }
  }

  // type: 1, name: "已结算",type: 2, name: "待结算",type: 3, name: "已对账",type: 4, name: "未对账",
  const getTagOrderBill = (type) => {
    const tagItem = {
      1: {
        icon: 'income-settled',
      },
      2: {
        icon: 'income-account',
      },
      3: {
        icon: 'income-reconciliation',
      },
      4: {
        icon: 'income-account',
      },
    }
    return tagItem[type] || { content: [] }
  }

  const okFn = (type, record) => {
    console.log('ok', record, type)
    const queryParam = {
      siteIdList: basicQueryParam.value.siteIdList,
      orderTimeQueryType: basicQueryParam.value.orderTimeQueryType,
      startTime: basicQueryParam.value.startTime,
      endTime: basicQueryParam.value.endTime,
    }
    getOrderStatistics(queryParam)
    getRevenueStatistics(queryParam)
  }
  /**
   * 跳转页面
   * @param mode 跳转模式
   * @param extraData 额外参数
   */
  const onPageJumpClick = (mode, extraData) => {
    if (mode == 'orderFee' || mode == 'orderBill') {
      if (extraData.totalAmount && Number(extraData.totalAmount) != 0) {
        props.nav2WithCode(mode, extraData)
      }
    }
    // 订单渠道
    if (mode == 'orderChannel') {
      if (canOrderChannelItemClick(extraData)) {
        props.nav2WithCode(mode, extraData)
      }
    }
    // 订单-取车门店数据统计
    if (mode == 'orderGiveCar') {
      if (canOrderGiveCarItemClick(extraData)) {
        props.nav2WithCode(mode, extraData)
      }
    }
  }

  // 订单渠道统计是否可以点击
  const canOrderChannelItemClick = (item) => {
    // 收入
    const totalAmount = item.totalAmount && Number(item.totalAmount) != 0
    // 抽佣
    const commissionAmount = item.commissionAmount && Number(item.commissionAmount) != 0
    // 净收入
    const totalProfitAmount = item.totalProfitAmount && Number(item.totalProfitAmount) != 0
    // 有效订单数
    const count = item.count && Number(item.count) != 0

    return totalAmount || commissionAmount || totalProfitAmount || count
  }

  // 订单-取车门店数据统计是否可以点击
  const canOrderGiveCarItemClick = (item) => {
    // 净收入
    const totalProfitAmount = item.totalProfitAmount && Number(item.totalProfitAmount) != 0
    // 有效订单数
    const count = item.count && Number(item.count) != 0
    return totalProfitAmount || count
  }

  // 骨架屏占位，第一次加载后关闭
  const initLoading = ref(true)
  const loadData = (params = {}) => {
    basicQueryParam.value = params
    const queryParam = {
      siteIdList: params.siteIdList,
      orderTimeQueryType: params.orderTimeQueryType,
      startTime: params.startTime,
      endTime: params.endTime,
      selectDateType: params.selectDateType,
    }
    // 判断时间是否存在
    if (params.startTime && params.endTime) {
      let { startTime, endTime } = params
      dayNum.value = dayjs(endTime).diff(dayjs(startTime), 'day') + 1
    }
    console.log('dayNum', dayNum.value)
    getShortOrderProfitStatistics()
    getShortOrderFeeProfitStatistics()
    getOrderStatistics(queryParam)
    getRevenueStatistics(queryParam)
  }

  // 订单统计
  const orderStatisticsData = ref({})
  const getOrderStatistics = (queryParam) => {
    orderStatistics(queryParam).then((res) => {
      const result = res.result || {}
      setTimeout(() => {
        orderStatisticsData.value = result
        initLoading.value = false
        emits('loadDataComplete')
      }, 50)
    })
  }

  // 总收入汇总
  const getRevenueStatistics = (queryParam) => {
    revenueStatistics(queryParam).then((res) => {
      const result = res.result || {}
      summaryData.value = result
      // 更新数据更新时间
      props.refreshUpdateTime(result.lastUpdateTime)
    })
  }

  // 分别为两种图表设置独立的加载状态
  const profitChartsReady = ref(false)
  const feeChartsReady = ref(false)

  const shortOrderProfitStatisticsData = ref([])
  const channelType = ref([])
  const getShortOrderProfitStatistics = async () => {
    profitChartsReady.value = false
    const param = {
      ...basicQueryParam.value,
      channelTypes: channelType.value,
    }

    const res = await shortOrderProfitStatistics(param)
    shortOrderProfitStatisticsData.value = res.result?.data || []

    // 确保数据更新后再显示图表
    nextTick(() => {
      setTimeout(() => {
        profitChartsReady.value = true
      }, 100)
    })
  }

  const channelTypeFee = ref([])
  const shortOrderFeeProfitStatisticsData = ref([])
  // 根据费用生成时间或结算时间统计订单费用
  const getShortOrderFeeProfitStatistics = async () => {
    feeChartsReady.value = false
    const param = {
      ...basicQueryParam.value,
      channelTypes: channelTypeFee.value,
      orderFeeQueryType: orderFeeQueryType.value,
    }

    const res = await shortOrderFeeProfitStatistics(param)
    shortOrderFeeProfitStatisticsData.value = res.result?.data || []

    // 确保数据更新后再显示图表
    nextTick(() => {
      setTimeout(() => {
        feeChartsReady.value = true
      }, 100)
    })
  }

  const openModal = (type) => {
    let title = ''
    let content = ''
    if (type == '1') {
      title = '保险费配置'
      content = '不计免赔还包含：'
    } else if (type == '2') {
      title = '车损费配置'
      content = '车损费还包含：'
    } else if (type == '3') {
      title = '油电费配置'
      content = '油电费还包含：'
    }
    configModalRef.value.open(title, content, type)
  }
  const openModalExplain = () => {
    Modal.info({
      title: '统计说明',
      width: '45vw',
      content: h('div', {}, [
        h('p', {}, '1、最多展示90天数据，如有需要可更精准的筛选时间'),
        h(
          'p',
          {},
          '2、根据订单的取值时间（取车或还车），统计订单下包含的所有费用以及结算情况，如根据实际还车时间筛选订单，则将订单所有费用统计在实际还车这一天'
        ),
        h('p', {}, '3、订单数：为当天订单状态为待排车、待用车、用车中、已还车、已完成的订单总数'),
      ]),
    })
  }
  const openModalExplainFee = () => {
    Modal.info({
      title: '统计说明',
      width: '45vw',
      content: h('div', {}, [
        h('p', {}, '1、最多展示90天数据，如有需要可更精准的筛选时间'),
        h('p', {}, '2、选择费用生成时间统计时，则统计费用生成时间在时间筛选范围内的所有结算状态的费用'),
        h('p', {}, '3、选择费用结算时间统计时，则统计费用结算时间在时间筛选范围内已结算的费用'),
        h('p', {}, '4、已结算的费用包含：已结算、结算中、部分结算下实结金额之和'),
      ]),
    })
  }

  const feeStatisticsRef = ref(null)

  const summaryCardCanClick = (item) => {
    if (item.type == 1) return true
    if ([3, 4].includes(item.type) && Number(item.totalAmount) != 0) {
      return true
    }
  }

  // 顶部统计卡片点击事件
  const onSummaryCardClick = (item) => {
    const type = item.type
    if (type == 1) {
      feeStatisticsRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
    } else {
      if (summaryCardCanClick(item)) {
        /**
         * 跳转页面-统计项
         */
        if (type == 3) {
          props.nav2WithCode('costViolation')
        }
        if (type == 4) {
          props.nav2WithCode('costTransfer')
        }
      }
    }
  }

  defineExpose({
    loadData,
  })
</script>
<style lang="less" scoped>
  .income-module {
    padding-bottom: 20px;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .purple {
    background: #f6f4ff;
  }
  .orange {
    background: #fff4e3;
  }
  .green {
    background: #eefff0;
  }
  .hand {
    cursor: pointer;
  }
  .income-wrapper {
    padding: 16px 20px 16px 0;
    background: linear-gradient(270deg, #6e81fd 0%, #3ca3f9 100%);
    box-shadow: 0px 16px 24px -15px rgba(78, 150, 250, 0.65);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 30px;
    margin-top: 20px;

    .income {
      height: 100%;
      padding-left: 20px;
      padding-bottom: 16px;
      .name,
      .count {
        font-weight: 600;
        font-size: 28px;
        color: #ffffff;
        line-height: 39px;
      }

      .bottom {
        font-weight: 600;
        font-size: 18px;
        color: #ffffff;
        line-height: 25px;
        margin-left: 48px;
      }
    }

    .icome-wrapper-card {
      width: 100%;
      padding-left: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: stretch;
    }
  }
  // 基础的
  .order-wrapper {
    .card-list-wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 20px;
    }
    .btns {
      font-weight: 400;
      font-size: 12px;
      color: #1890ff;
      line-height: 17px;
      margin-left: 8px;
      cursor: pointer;
    }
  }
  .card-total + .card-cell {
    margin-top: 6px;
  }
  .income-statistical-button {
    color: #1e1e1e;
    border: 1px solid #c5c6cd;
  }
  .is-link {
    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }
</style>
